<!--
 * @Author: ChunLai
 * @Date: 2023-08-24 10:15:24
 * @LastEditTime: 2023-08-24 12:10:18
 * @Description: Field 输入框
 * @FilePath: \0.newInsure\src\views\test\components\MsFieldInput.vue
-->
<template>
  <div class="ms_field_input">
    <div class="labeled-number-input">
      <div class="field_label">{{ label }}</div>
      <div class="labeled_input">
        <div class="text_field_content">
          <input
            class="text_field_input"
            :value="value"
            placeholder="请输入被保人体重"
            ref="inputRef"
            @input="inputChange"
            @focus="focusEvent"
            @blur="blurChange"
          />
          <!-- <span class="clear_icon">
            <van-icon
              name="clear"
              style="margin-left: 10px"
              size="14"
              color="#969799"
              @click="clearEvent"
              v-if="clearable && isfocus"
            />
          </span> -->
        </div>
        <div class="input-unit" v-if="funit">{{ funit }}</div>
      </div>
      <hr class="text_field_line normal" />
      <hr class="text_field_line error" v-if="errmsg" />
      <hr class="text_field_line focus_line" :class="isfocus ? 'focus' : ''" />
    </div>
    <div class="text_field_help" v-if="errmsg">
      {{ errmsg }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'MsFieldInput',
  props: {
    funit: {
      type: String,
      default: () => '',
    },
    value: {
      type: String,
      default: () => '',
    },
    label: {
      type: String,
      default: () => '',
    },
    clearable: {
      type: Boolean,
      default: () => true,
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      errmsg: '', // 请输入被保人体重
      isfocus: false,
    };
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    inputChange(e) {
      // console.log(e);
      this.$emit('change', e.target.value);
    },
    clearEvent() {
      this.$refs.inputRef.focus();
      this.$emit('change', '');
    },
    focusEvent() {
      this.isfocus = true;
      this.errmsg = '';
    },
    blurChange() {
      this.isfocus = false;
      if (this.value === '') {
        this.errmsg = '请输入被保人体重';
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ms_field_input {
  padding: 20px 14px;
  font-size: 14px;
  background-color: #ffffff;
}

.labeled-number-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 44px;

  .text_field_line {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    border: none;
    background: none;
    border-top: none;
    overflow: visible;
    box-sizing: content-box;
    &.normal {
      width: 100%;
      border-bottom: 1px solid #e9ecee;
    }
    &.error {
      width: 100%;
      border-bottom: 1px solid #e34545;
    }
    &.focus_line {
      width: 0;
      transform: scaleX(0);
      transition: transform 0.45s cubic-bezier(0.23, 1, 0.32, 1),
        -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.32, 1);
      &.focus {
        width: 100%;
        border-bottom: 1px solid #52c750;
        transform: scaleX(1);
      }
    }
  }

  .field_label {
    width: 100px;

    color: #394043;
  }
  .labeled_input {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .input-unit {
      margin-left: 10px;
    }
    .text_field_content {
      display: flex;
      align-items: center;
      position: relative;
      .text_field_input {
        margin: 11px 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        text-align: right;
        font-size: 14px;
        color: #394043;
        border: none;
        background: none;
        border-radius: 0;
        box-shadow: none;
        display: block;
        color: rgba(0, 0, 0, 0.87);
        &::-webkit-input-placeholder {
          color: #babbc1;
          font-size: 12px;
        }
      }
      .clear_icon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
      }
    }
  }
}
.text_field_help {
  font-size: 12px;
  color: #e34545;
  line-height: 12px;
  text-align: right;
  margin-top: 10px;
}
</style>
